<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2015 by fengdh (http://jsbin.com/xamiwo/90/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>

<head>
  <meta name="description" content="MDict JS">
  <!--
  <script src="require.js"></script>
  <script src="jquery-1.11.1.js"></script>
  <script src="lzo1x_decompress_safe.js"></script>
  <script src="minilzo-decompress2.js"></script>
  <script src="murmurhash3.js"></script>
  -->
  <link rel="stylesheet" type="text/css" href="selectize.default.css">
  <meta charset="utf-8">
  <title>MDict JS</title>
  <style>
    #btnLookup {
      border: none;
      height: 36px;
      font-size: 12pt;
      font-weight: bold;
      vertical-align: top;
      border-radius: 3px;
      border-style: solid;
      border-width: 1px;
      border-color: transparent;
      padding: 0 2em;
      transition: background 400ms ease;
    }

    #btnLookup:not([disabled]) {
      background-color: #1A4FDD;
      xbackground-image: none;
      color: white;
    }

    #dict-title {
      position: absolute;
      top: 0;
      right: 0;
      max-width: 300px;
      font-size: 10px;
      opacity: 0.9;
    }

    #dict-title * {
      font-size: 10px !important;
    }

    #word+.selectize-control {
      display: inline-block;
      min-width: 18em;
    }

    /*---------------------------*/

    .Xstripes {
      background-color: #1A4FDD;
      color: white;
      border-color: #33D;
      -webkit-background-size: 30px 30px;
      -moz-background-size: 30px 30px;
      background-size: 30px 30px;
      background-image: -webkit-gradient(linear, left top, right bottom,
          color-stop(.25, rgba(255, 255, 255, 0.34)), color-stop(.25, transparent),
          color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .34)),
          color-stop(.75, rgba(255, 255, 255, 0.34)), color-stop(.75, transparent),
          to(transparent));
      background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.34) 25%, transparent 25%,
          transparent 50%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.34) 75%,
          transparent 75%, transparent);
      background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.34) 25%, transparent 25%,
          transparent 50%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.34) 75%,
          transparent 75%, transparent);
      background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 0.34) 25%, transparent 25%,
          transparent 50%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.34) 75%,
          transparent 75%, transparent);
      background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.34) 25%, transparent 25%,
          transparent 50%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.34) 75%,
          transparent 75%, transparent);
      background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.34) 25%, transparent 25%,
          transparent 50%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, .35) 75%,
          transparent 75%, transparent);

      -webkit-animation: animate-stripes 1s linear infinite;
      -moz-animation: animate-stripes 1s linear infinite;
    }

    @-webkit-keyframes animate-stripes {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 60px 0;
      }
    }


    @-moz-keyframes animate-stripes {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 60px 0;
      }
    }
  </style>

</head>

<body>
  Choose a dictionary file (*.mdx + optional *.mdd): <input id="dictfile" type="file" multiple=>
  <p>
    <input id="word" type="text" value="pa">
    <input id="btnLookup" type="button" value="look up" disabled="false" class="">
  <p style="color: #888;font-size: 12px;font-style:italic;">
    You can apply wildcard in query text to narrow down word list of candidates:
  <ul style="color: #888;font-size: 12px;font-style:italic;">
    <li>"*" for 0 or more characters, "?" for just 1 character</li>
    <li>Append whitespace to end of query text to include space saperated phrase.</li>
  </ul>
  </p>

  <div id="dict-title"></div>
  <div id="definition">
  </div>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script type="text/javascript" src="conf.js"></script>
  <script src="require.js" data-main="mdict"></script>
  <script src="utils.js"></script>
  <script>
    var dict_url = "http://localhost:8096/testmdict.mdx"
    var mDict_instance = new MDict(dict_url);
    setTimeout(async () => {
      console.log('mDict_instance', mDict_instance);
      const searchData = await mDict_instance.search('app')
      const word = searchData[0].word.toString()
      const lookupData = await mDict_instance.lookup(word)
      console.log('search result =>', word);
      console.log('lookup result =>', lookupData.contents());
    }, 1000)

  </script>
</body>

</html>